<script setup>
import { ref } from 'vue'
import { sirenConfig } from '../pages/home/index'

const show = ref(false)

const tapRow = (e) => {
  if (e.ceil === '<span class=\"underline cursor-pointer\" >定位</span>') {
    let Q = {
      type: 'warning',
      message: '告警定位',
      data: {
        devicename: e.row[1],
        deviceID: e.row[0],
      }
    }
    console.log(JSON.stringify(Q))

    ue4("QuestPosition", {
      "PositionName": JSON.stringify(Q)
    })
    show.value = false
  }
}

</script>

<template>
  <div>
    <img v-if="sirenConfig.data.length == 0" class="w-[40px] h-[40px]" src="../assets/one/alarm.png" alt="">
    <template v-else>

      <div v-if="!show" class="error_one_box w-[400px] " style="color: #FF8080;">
        <div class="h-[40px] text-[14px]  pl-[40px] flex items-center">
          <span class="line1 leading-[40px] flex-1">告警：{{ sirenConfig.data[0][1] }}-{{ sirenConfig.data[0][2] }}</span>
          <span @click="show = true" class="w-[52px] flex justify-center cursor-pointer text-white">{{ '展开' }}</span>
        </div>

      </div>




      <div v-else class="error_one_box1 h-[404px] flex flex-col w-[400px]">

        <div class="h-[40px] text-[14px]  pl-[40px] flex items-center" style="color: #FF8080;">
          <span class="line1 leading-[40px] flex-1">告警</span>
          <span @click="show = false" class="w-[52px] flex justify-center cursor-pointer text-white">{{ '收起' }}</span>
        </div>



        <dv-scroll-board @click="tapRow" class="flex-1" :config="sirenConfig" style="width:100%;height: 100%;" />

      </div>
    </template>

  </div>
</template>

<style scoped>
.error_one_box {
  background-image: url(../assets/one/error.png);
  background-size: 100% 100%;
}

.error_one_box1 {
  background-image: url(../assets/one/error_bg.png);
  background-size: 100% 100%;

}

.line1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
</style>
